<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
<html xmlns = "http://www.w3.org/1999/xhtml">
  <!-- 2012 lukbrasil -->
  <!-- Internet & World Wide Web How To Program - Exercise 9.07 -->
  <head>
    <title>Exercise 9.07</title>
    
    <script type = "text/javascript">
      <!--
      function circleArea(radius) {
        return Math.PI * Math.pow(radius, 2);
      }
      
      function displayArea() {
        var radius = parseFloat(document.getElementById("radiusField").value);
        
        document.getElementById("areaField").value = (!isNaN(radius) ? circleArea(radius) : "");
      }
      // -->
    </script>
  </head>
  <body>
    <form action = "">
      <table>
        <tbody>
          <tr>
            <td>Radius: </td>
            <td><input id = "radiusField" type = "text" /></td>            
            <td/>                        
          </tr>
          
          <tr>
            <td>Area: </td>
            <td><input id = "areaField" type = "text" /></td>
            <td><input type = "button" value = "Calculate" onclick = "displayArea()" /></td>
          </tr>
        </tbody>
      </table>
    </form>
  </body>
</html>
